Skip to content

Feature: upgrade mui v9#249

Open
santipalenque wants to merge 18 commits into
mainfrom
feature/upgrade-mui-v9
Open

Feature: upgrade mui v9#249
santipalenque wants to merge 18 commits into
mainfrom
feature/upgrade-mui-v9

Conversation

@santipalenque

@santipalenque santipalenque commented May 21, 2026

Copy link
Copy Markdown
Contributor

https://app.clickup.com/t/86ba1zv3c

Summary by CodeRabbit

Release Notes

  • Chores

    • Bumped version to 6.0.0-beta.4 with major dependency updates (MUI v9, React 18/19, Emotion, and testing libraries)
    • Updated Node.js runtime support to v22
  • Refactor

    • Enhanced form validation UI with improved error messaging and helper text display
    • Modernized component layout patterns for improved consistency

@coderabbitai

coderabbitai Bot commented May 21, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The PR upgrades the library to target MUI 9, React 18/19, and Node 22. Component prop APIs are migrated from deprecated InputProps/InputLabelProps/Grid2 to slotProps and Grid. SummitAddonSelect gains native error/helperText validation UI. CI workflows, .nvmrc, package.json, and webpack sass configuration are updated to match.

Changes

MUI 9 and React 18 Migration

Layer / File(s) Summary
Version and toolchain updates
package.json, .nvmrc, .github/workflows/build_test.yml, .github/workflows/jest.yml, webpack.common.js
Package version bumped to 6.0.0-beta.4; devDependencies and peerDependencies updated for MUI 9, React 18/19, Emotion 11, and sass; Node pin updated to 22.22.1 in .nvmrc and CI workflows; sass-loader configured with api: 'modern-compiler'.
SummitAddonSelect error/helperText prop refactor
src/components/mui/summit-addon-select.js, src/components/mui/formik-inputs/mui-formik-summit-addon-select.js, src/components/mui/__tests__/mui-formik-summit-addon-select.test.js
SummitAddonSelect wraps Select in FormControl/FormHelperText for validation UI, adding error and helperText props and removing inputProps spreading. MuiFormikSummitAddonSelect drops inputProps and passes Formik state as direct props. Test mock updated to reflect new prop contract.
SlotProps migration across input and menu components
src/components/inputs/company-input-v2.js, src/components/mui/formik-inputs/mui-formik-textfield.js, src/components/mui/FormItemTable/index.js, src/components/mui/formik-inputs/mui-formik-pricefield.js, src/components/mui/formik-inputs/mui-formik-async-select.js, src/components/mui/formik-inputs/company-input-mui.js, src/components/mui/formik-inputs/mui-sponsor-input.js, src/components/mui/formik-inputs/sponsorship-input-mui.js, src/components/mui/menu-button.js, src/components/mui/formik-inputs/item-price-tiers.js, src/components/mui/formik-inputs/additional-input/meta-field-values.js
Replaces InputProps, InputLabelProps, inputProps, and MenuListProps usage with slotProps across all listed components. MuiFormikTextField merges external slotProps.
Grid2 to Grid layout migration
src/components/mui/formik-inputs/additional-input/additional-input.js, src/components/mui/formik-inputs/additional-input/meta-field-values.js, src/components/mui/formik-inputs/item-price-tiers.js, src/components/mui/GridFilter/components/Filter.jsx
Replaces Grid2 imports, container/item JSX, and size props with Grid equivalents across form and filter components. MetaFieldValues also removes the offset={4} prop from the add-value wrapper.
Test assertion and mock updates
src/components/mui/FormItemTable/__tests__/FormItemTable.test.js, src/components/mui/__tests__/additional-input-list.test.js, src/components/mui/__tests__/additional-input.test.js, src/components/mui/__tests__/meta-field-values.test.js, src/components/mui/__tests__/mui-formik-datepicker.test.js, src/components/mui/__tests__/mui-formik-switch.test.js, src/utils/__tests__/actions.test.js
Updates ARIA role queries (switch instead of checkbox, group/spinbutton instead of label text for datepicker), reformats Jest mock factories to wrapped function expressions, removes children from select mock, and drops unused superagent import/mock.
Mechanical JSX formatting and icon import fix
src/components/inputs/upload-input-v3/index.js, src/components/mui/cards/InlineCard/index.js, src/components/mui/cards/TableCard/index.js, src/components/mui/table/extra-rows/*, src/utils/methods.js
Corrects ErrorOutlineIcon import to ErrorOutlined; wraps map-callback JSX in parentheses in card and table row components; formatting-only adjustment in methods.js.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • smarcet

Poem

🐇 Hop, hop! The Grid2 is gone,
SlotProps now carry every prop along,
MUI nine blooms like a clover patch,
React eighteen — what a splendid catch!
Node twenty-two keeps the warren bright,
The bunny ships a beta tonight! 🌟

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Feature: upgrade mui v9' clearly and directly describes the main objective of the pull request—upgrading MUI to version 9. It is concise and specific enough to convey the primary change.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/upgrade-mui-v9

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@santipalenque santipalenque requested a review from smarcet May 21, 2026 17:52
@santipalenque santipalenque force-pushed the feature/upgrade-mui-v9 branch from 54e6f6e to b89d534 Compare June 8, 2026 14:56

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@package.json`:
- Around line 145-156: The package.json declares peer ranges for react/react-dom
including ^19.0.0 but depends on react-redux ^7.1.0 which only supports up to
React 18; either (A) narrow react/react-dom peer ranges to ^18.0.0 (update the
"react" and "react-dom" entries) so they match react-redux@7.x, or (B) upgrade
react-redux to a v8+ release that lists support for React 19 and also update the
redux peer range to the version required by that react-redux major (e.g., bump
"react-redux" and adjust "redux" peer range accordingly); pick one approach and
update the package.json entries for "react", "react-dom", "react-redux", and
"redux" consistently and run install to verify no peer conflicts.

In `@src/components/inputs/upload-input-v3/index.js`:
- Around line 388-394: The anchor that opens the preview in a new tab (the <a>
wrapping ProgressiveImg, using props src, previewSrc and title from
T.translate("upload_input_v3.see_preview")) uses target="_blank" but lacks rel
attributes; update that anchor to include rel="noopener noreferrer" to prevent
reverse-tabnabbing when opening external URLs while keeping the existing target
and children intact.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9a5238b8-62c5-444a-878d-b8d24486e40c

📥 Commits

Reviewing files that changed from the base of the PR and between 54e6f6e and b89d534.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (27)
  • package.json
  • src/components/inputs/company-input-v2.js
  • src/components/inputs/upload-input-v3/index.js
  • src/components/mui/FormItemTable/__tests__/FormItemTable.test.js
  • src/components/mui/__tests__/additional-input-list.test.js
  • src/components/mui/__tests__/additional-input.test.js
  • src/components/mui/__tests__/meta-field-values.test.js
  • src/components/mui/__tests__/mui-formik-datepicker.test.js
  • src/components/mui/__tests__/mui-formik-switch.test.js
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/formik-inputs/additional-input/additional-input.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/menu-button.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/FeeRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/table/extra-rows/TotalRow.jsx
  • src/utils/methods.js
✅ Files skipped from review due to trivial changes (11)
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/menu-button.js
  • src/components/inputs/company-input-v2.js
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/table/extra-rows/TotalRow.jsx
  • src/components/mui/FormItemTable/tests/FormItemTable.test.js
  • src/utils/methods.js
  • src/components/mui/table/extra-rows/FeeRow.jsx
🚧 Files skipped from review as they are similar to previous changes (12)
  • src/components/mui/tests/additional-input-list.test.js
  • src/components/mui/tests/mui-formik-datepicker.test.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/tests/meta-field-values.test.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/tests/additional-input.test.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@package.json`:
- Around line 145-156: The package.json declares peer ranges for react/react-dom
including ^19.0.0 but depends on react-redux ^7.1.0 which only supports up to
React 18; either (A) narrow react/react-dom peer ranges to ^18.0.0 (update the
"react" and "react-dom" entries) so they match react-redux@7.x, or (B) upgrade
react-redux to a v8+ release that lists support for React 19 and also update the
redux peer range to the version required by that react-redux major (e.g., bump
"react-redux" and adjust "redux" peer range accordingly); pick one approach and
update the package.json entries for "react", "react-dom", "react-redux", and
"redux" consistently and run install to verify no peer conflicts.

In `@src/components/inputs/upload-input-v3/index.js`:
- Around line 388-394: The anchor that opens the preview in a new tab (the <a>
wrapping ProgressiveImg, using props src, previewSrc and title from
T.translate("upload_input_v3.see_preview")) uses target="_blank" but lacks rel
attributes; update that anchor to include rel="noopener noreferrer" to prevent
reverse-tabnabbing when opening external URLs while keeping the existing target
and children intact.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9a5238b8-62c5-444a-878d-b8d24486e40c

📥 Commits

Reviewing files that changed from the base of the PR and between 54e6f6e and b89d534.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (27)
  • package.json
  • src/components/inputs/company-input-v2.js
  • src/components/inputs/upload-input-v3/index.js
  • src/components/mui/FormItemTable/__tests__/FormItemTable.test.js
  • src/components/mui/__tests__/additional-input-list.test.js
  • src/components/mui/__tests__/additional-input.test.js
  • src/components/mui/__tests__/meta-field-values.test.js
  • src/components/mui/__tests__/mui-formik-datepicker.test.js
  • src/components/mui/__tests__/mui-formik-switch.test.js
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/formik-inputs/additional-input/additional-input.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/menu-button.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/FeeRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/table/extra-rows/TotalRow.jsx
  • src/utils/methods.js
✅ Files skipped from review due to trivial changes (11)
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/menu-button.js
  • src/components/inputs/company-input-v2.js
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/table/extra-rows/TotalRow.jsx
  • src/components/mui/FormItemTable/tests/FormItemTable.test.js
  • src/utils/methods.js
  • src/components/mui/table/extra-rows/FeeRow.jsx
🚧 Files skipped from review as they are similar to previous changes (12)
  • src/components/mui/tests/additional-input-list.test.js
  • src/components/mui/tests/mui-formik-datepicker.test.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/tests/meta-field-values.test.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/tests/additional-input.test.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js
🛑 Comments failed to post (2)
package.json (1)

145-156: ⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Checking declared peer support for react-redux in the selected range..."
# Resolve latest 7.x chosen by ^7.1.0
RR_7_LATEST=$(npm view "react-redux@^7.1.0" version)
echo "Resolved react-redux for ^7.1.0 => ${RR_7_LATEST}"

echo "Peer deps for react-redux@${RR_7_LATEST}:"
npm view "react-redux@${RR_7_LATEST}" peerDependencies --json

echo "Peer deps for latest react-redux:"
RR_LATEST=$(npm view react-redux version)
echo "Latest react-redux => ${RR_LATEST}"
npm view "react-redux@${RR_LATEST}" peerDependencies --json

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 3177


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Resolve the max version in the range ^7.1.0 (i.e., >=7.1.0 and <8.0.0), then print its peer deps.
VERS_JSON=$(npm view react-redux versions --json)
MAX_VER=$(python3 - <<'PY'
import json, re
from packaging.version import Version

data = json.loads("""__VERS_JSON__""")
# data is a list of version strings
cands=[]
for v in data:
    # keep only semver-looking versions
    if not re.match(r'^\d+\.\d+\.\d+.*$', v):
        continue
    pv = Version(v.split('-')[0])  # ignore pre-release suffixes for selection
    if pv >= Version("7.1.0") and pv < Version("8.0.0"):
        cands.append(pv)

if not cands:
    raise SystemExit("No versions found in range ^7.1.0")
print(str(max(cands)))
PY
)
# substitute JSON into the python snippet safely
MAX_VER=$(python3 - <<PY
import json, re
from packaging.version import Version
data = json.loads('''$VERS_JSON''')
cands=[]
for v in data:
    if not re.match(r'^\d+\.\d+\.\d+.*$', v):
        continue
    pv = Version(v.split('-')[0])
    if pv >= Version("7.1.0") and pv < Version("8.0.0"):
        cands.append(pv)
print(str(max(cands)))
PY
)

echo "Max react-redux version satisfying ^7.1.0 => $MAX_VER"
echo

echo "peerDependencies for react-redux@$MAX_VER:"
npm view "react-redux@$MAX_VER" peerDependencies --json || true
echo

echo "peerDependencies for react-redux@latest:"
npm view react-redux peerDependencies --json || true

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 684


🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Inspect the local package.json peer/dev dependency declarations around the referenced lines.
echo "---- package.json excerpt (relevant lines) ----"
sed -n '70,200p' package.json

# 2) Check peerDependencies for a representative/latest react-redux 7.x.
echo
echo "---- react-redux@7.2.9 peerDependencies ----"
npm view react-redux@7.2.9 peerDependencies --json

echo
echo "---- react-redux@7.1.0 peerDependencies (floor of ^7.1.0) ----"
npm view react-redux@7.1.0 peerDependencies --json

# 3) Also check react-redux@latest for context.
echo
echo "---- react-redux@latest peerDependencies ----"
npm view react-redux peerDependencies --json

Repository: OpenStackweb/openstack-uicore-foundation

Length of output: 4867


React peer range claims v19 but react-redux 7.x peers exclude it.
This package declares react/react-dom support for ^19.0.0, while the pinned react-redux range (^7.1.0) resolves to a React-18-only peer contract (e.g., react-redux@7.2.9 peer-depines react as ^16.8.3 || ^17 || ^18, with no React 19). Either narrow this package’s react/react-dom peer ranges to React 18, or upgrade react-redux to a major that supports React 19 (e.g., react-redux@latest declares react ^18.0 || ^19 but also requires redux ^5.0.0, so update the redux peer range accordingly).

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` around lines 145 - 156, The package.json declares peer ranges
for react/react-dom including ^19.0.0 but depends on react-redux ^7.1.0 which
only supports up to React 18; either (A) narrow react/react-dom peer ranges to
^18.0.0 (update the "react" and "react-dom" entries) so they match
react-redux@7.x, or (B) upgrade react-redux to a v8+ release that lists support
for React 19 and also update the redux peer range to the version required by
that react-redux major (e.g., bump "react-redux" and adjust "redux" peer range
accordingly); pick one approach and update the package.json entries for "react",
"react-dom", "react-redux", and "redux" consistently and run install to verify
no peer conflicts.
src/components/inputs/upload-input-v3/index.js (1)

388-394: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add rel="noopener noreferrer" to the preview anchor opened in a new tab.

Line 388 opens a new tab via target="_blank" but omits rel, which allows reverse-tabnabbing on external URLs.

Suggested patch
-                  <a href={src} target="_blank" title={T.translate("upload_input_v3.see_preview")}>
+                  <a
+                    href={src}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    title={T.translate("upload_input_v3.see_preview")}
+                  >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

                  <a
                    href={src}
                    target="_blank"
                    rel="noopener noreferrer"
                    title={T.translate("upload_input_v3.see_preview")}
                  >
                    <ProgressiveImg
                      alt={filename}
                      src={previewSrc}
                      placeholderSrc={file_icon}
                    />
                  </a>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/inputs/upload-input-v3/index.js` around lines 388 - 394, The
anchor that opens the preview in a new tab (the <a> wrapping ProgressiveImg,
using props src, previewSrc and title from
T.translate("upload_input_v3.see_preview")) uses target="_blank" but lacks rel
attributes; update that anchor to include rel="noopener noreferrer" to prevent
reverse-tabnabbing when opening external URLs while keeping the existing target
and children intact.

santipalenque and others added 15 commits June 11, 2026 12:02
- @mui/material: ^6.4.3 → ^9.0.0
- @mui/icons-material: ^6.4.3 → ^9.0.0
- @mui/x-date-pickers: ^7.26.0 → ^9.0.0 (v9 targets MUI v9)
- @emotion/react: ^11.11.4 → ^11.14.0
- @emotion/styled: ^11.11.5 → ^11.14.0
- react / react-dom: ^17.0.0 → ^18.0.0 (MUI v9 dropped React 17)
- @testing-library/react: 12.1.5 → ^14.0.0 (RTL 12 supports React 17 only)

peerDependencies updated to match:
- react / react-dom: ^18.0.0 || ^19.0.0
- @emotion/*: ^11.0.0 (broader range for consumers)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Grid2 → Grid in item-price-tiers, additional-input, meta-field-values
- InputProps → slotProps.input in meta-field-values (TextField endAdornment)
- inputProps → slotProps.htmlInput in mui-formik-pricefield, mui-formik-quantity-field, item-price-tiers (Checkbox)
- Autocomplete renderInput: params.InputProps → params.slotProps in company-input-mui, sponsorship-input-mui, mui-sponsor-input
- MuiFormikTextField: deep-merge external slotProps.htmlInput with internal maxLength
- MenuListProps → slotProps.list in menu-button
- ErrorOutline → ErrorOutlined in upload-input-v3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- MuiFormikSwitch: getByRole("checkbox") → getByRole("switch") (MUI v9 uses role=switch)
- MuiFormikDatepicker: getByLabelText → getByRole("group")/getByRole("spinbutton")
  (x-date-pickers v9 renders spinbutton sections, not a plain input)
- FormItemTable: drop MUI MenuItem children from select mock (MenuItem now requires
  MenuListContext; rendering it inside native <select> crashes in v9)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Skips 5.x series to signal breaking peer-dep change (@mui/material ^9.0.0,
react ^18||^19). Consumers must upgrade MUI and React before installing this version.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…emTable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@santipalenque santipalenque force-pushed the feature/upgrade-mui-v9 branch from 463db6b to 4e2078d Compare June 11, 2026 15:04

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/mui/GridFilter/components/Filter.jsx`:
- Line 16: The component imports MUI v1 Grid but uses the Grid2 API's size prop;
update the import to use Grid2 (the Grid2 component) from `@mui/material` (replace
the existing Grid import) so the existing usages of size on the Grid items (in
Filter.jsx) work correctly; ensure any references to Grid in this file (e.g.,
Grid used around the filter controls and IconButton areas) now refer to Grid2 so
layout (11/1 splits) renders as intended.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a2e11671-9cd2-4b68-8c96-874e50333bfd

📥 Commits

Reviewing files that changed from the base of the PR and between b89d534 and 463db6b.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (8)
  • .github/workflows/build_test.yml
  • .github/workflows/jest.yml
  • .nvmrc
  • package.json
  • src/components/mui/FormItemTable/index.js
  • src/components/mui/GridFilter/components/Filter.jsx
  • src/utils/__tests__/actions.test.js
  • webpack.common.js
💤 Files with no reviewable changes (1)
  • src/utils/tests/actions.test.js
✅ Files skipped from review due to trivial changes (1)
  • .github/workflows/jest.yml
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json

import React, { useEffect } from "react";
import T from "i18n-react/dist/i18n-react";
import { Box, Grid2, IconButton } from "@mui/material";
import { Box, Grid, IconButton } from "@mui/material";

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Grid v1 component imported but Grid2 API (size prop) is used.

The code imports Grid (v1) from @mui/material at line 16, but uses the size prop at lines 84 and 114, which is the Grid2 API. Grid v1 does not recognize the size prop and uses xs, sm, md, lg, xl instead. This will cause the layout to break—the grid items will likely render at full width instead of 11/1 column splits.

In MUI v9, Grid2 is stable and should be used with the size prop.

🔧 Fix: Import and use Grid2
-import { Box, Grid, IconButton } from "`@mui/material`";
+import { Box, IconButton } from "`@mui/material`";
+import Grid from "`@mui/material/Grid2`";

The rest of the code (using size prop) is already correct for Grid2.

Also applies to: 83-135

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/GridFilter/components/Filter.jsx` at line 16, The
component imports MUI v1 Grid but uses the Grid2 API's size prop; update the
import to use Grid2 (the Grid2 component) from `@mui/material` (replace the
existing Grid import) so the existing usages of size on the Grid items (in
Filter.jsx) work correctly; ensure any references to Grid in this file (e.g.,
Grid used around the filter controls and IconButton areas) now refer to Grid2 so
layout (11/1 splits) renders as intended.

santipalenque and others added 2 commits June 11, 2026 12:26
- Remove invalid offset={4} from Grid container in MetaFieldValues (offset is item-level only)
- Replace inputProps spread on Select with explicit error/helperText props wrapped in FormControl/FormHelperText so validation state actually renders

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/components/mui/__tests__/mui-formik-summit-addon-select.test.js (1)

58-75: ⚡ Quick win

Align the migrated test intent and assert helperText propagation.

The test name still references inputProps, and it doesn’t assert the new helperText contract.

Proposed test update
-  test("passes error to inputProps when touched and has error", () => {
+  test("passes error and helperText when touched and has error", () => {
@@
     expect(screen.getByTestId("summit-addon-select")).toHaveAttribute(
       "data-error",
       "true"
     );
+    expect(screen.getByTestId("summit-addon-select")).toHaveAttribute(
+      "data-helper-text",
+      "Required"
+    );
   });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/mui/__tests__/mui-formik-summit-addon-select.test.js` around
lines 58 - 75, The test "passes error to inputProps when touched and has error"
still references the old inputProps contract after migration to helperText.
Update the test name to reflect that it now tests helperText propagation, and
add an assertion that verifies the helperText containing "Required" is actually
rendered and displayed when the field is touched and has an error. The current
assertion only checks the data-error attribute but does not validate that the
error message itself is passed through as helperText to the user.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/mui/__tests__/mui-formik-summit-addon-select.test.js`:
- Around line 58-75: The test "passes error to inputProps when touched and has
error" still references the old inputProps contract after migration to
helperText. Update the test name to reflect that it now tests helperText
propagation, and add an assertion that verifies the helperText containing
"Required" is actually rendered and displayed when the field is touched and has
an error. The current assertion only checks the data-error attribute but does
not validate that the error message itself is passed through as helperText to
the user.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 405cb2f5-ad87-4a1f-a98f-8904586e77b7

📥 Commits

Reviewing files that changed from the base of the PR and between 463db6b and dcf4414.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (36)
  • .github/workflows/build_test.yml
  • .github/workflows/jest.yml
  • .nvmrc
  • package.json
  • src/components/inputs/company-input-v2.js
  • src/components/inputs/upload-input-v3/index.js
  • src/components/mui/FormItemTable/__tests__/FormItemTable.test.js
  • src/components/mui/FormItemTable/index.js
  • src/components/mui/GridFilter/components/Filter.jsx
  • src/components/mui/__tests__/additional-input-list.test.js
  • src/components/mui/__tests__/additional-input.test.js
  • src/components/mui/__tests__/meta-field-values.test.js
  • src/components/mui/__tests__/mui-formik-datepicker.test.js
  • src/components/mui/__tests__/mui-formik-summit-addon-select.test.js
  • src/components/mui/__tests__/mui-formik-switch.test.js
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/formik-inputs/additional-input/additional-input.js
  • src/components/mui/formik-inputs/additional-input/meta-field-values.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/formik-inputs/mui-formik-summit-addon-select.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/menu-button.js
  • src/components/mui/summit-addon-select.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/FeeRow.jsx
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/utils/__tests__/actions.test.js
  • src/utils/methods.js
  • webpack.common.js
💤 Files with no reviewable changes (1)
  • src/utils/tests/actions.test.js
✅ Files skipped from review due to trivial changes (9)
  • .github/workflows/build_test.yml
  • src/components/mui/cards/InlineCard/index.js
  • src/components/mui/table/extra-rows/PaymentRow.jsx
  • .nvmrc
  • src/components/mui/cards/TableCard/index.js
  • src/components/mui/table/extra-rows/DiscountRow.jsx
  • src/components/mui/table/extra-rows/RefundRow.jsx
  • src/components/mui/tests/additional-input.test.js
  • src/utils/methods.js
🚧 Files skipped from review as they are similar to previous changes (20)
  • src/components/mui/tests/mui-formik-switch.test.js
  • src/components/inputs/company-input-v2.js
  • src/components/inputs/upload-input-v3/index.js
  • src/components/mui/formik-inputs/item-price-tiers.js
  • src/components/mui/tests/additional-input-list.test.js
  • src/components/mui/formik-inputs/company-input-mui.js
  • src/components/mui/formik-inputs/mui-sponsor-input.js
  • src/components/mui/table/extra-rows/FeeRow.jsx
  • .github/workflows/jest.yml
  • src/components/mui/formik-inputs/sponsorship-input-mui.js
  • src/components/mui/GridFilter/components/Filter.jsx
  • src/components/mui/formik-inputs/mui-formik-pricefield.js
  • src/components/mui/FormItemTable/index.js
  • src/components/mui/formik-inputs/mui-formik-textfield.js
  • src/components/mui/tests/mui-formik-datepicker.test.js
  • src/components/mui/FormItemTable/tests/FormItemTable.test.js
  • webpack.common.js
  • src/components/mui/formik-inputs/mui-formik-async-select.js
  • package.json
  • src/components/mui/formik-inputs/additional-input/additional-input.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant